<template>
  <div class="checkBox">
    <el-dialog
      :append-to-body="true"
      :title="$t('menu_permission_setting')"
      v-model="state.dialogVisible"
      custom-class="dialogBox"
      :close-on-click-modal="false"
      :modal="false"
      @close="cancel"
    >
      <el-form
        :model="state.formData"
        :rules="state.rules"
        ref="ruleForm"
        label-width="100px"
        class="paddingBox formBox flex_wrap_start_start"
      >
        <el-form-item v-show="false" :label="$t('menu_name')" prop="menuId">
          <el-input
            v-model.trim="state.formData.menuId"
            :disabled="true"
            @input="(e) => (state.formData.menuId = validSe(e))"
          />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input
            v-model.trim="state.formData.name"
            maxlength="100"
            @input="(e) => (state.formData.name = validSe(e))"
          />
        </el-form-item>
        <el-form-item :label="$t('code')" prop="code">
          <el-input
            v-model.trim="state.formData.code"
            maxlength="100"
            @input="(e) => (state.formData.code = validSe(e))"
          />
        </el-form-item>
        <el-form-item :label="$t('source_type')" prop="type">
          <select-model
            v-model="state.formData.type"
            typeCode="base_resource_type"
            @input="(e) => (state.formData.type = validSe(e))"
          />
        </el-form-item>
        <el-form-item label="路由路径" prop="type">
          <el-input
            v-model="state.formData.path"
            :disabled="needPath"
            maxlength="200"
            @input="(e) => (state.formData.path = validSe(e))"
          />
        </el-form-item>
        <el-form-item label="组件名称" prop="type">
          <el-input
            v-model="state.formData.resourceCode"
            :disabled="needPath"
            maxlength="200"
            @input="(e) => (state.formData.resourceCode = validSe(e))"
          />
        </el-form-item>
        <el-form-item :label="$t('desc')" class="not-br" prop="remark">
          <el-input
            type="textarea"
            rows="3"
            v-model.trim="state.formData.remark"
            maxlength="200"
            :placeholder="$t('err_menu_desc')"
            @input="(e) => (state.formData.remark = validSe(e))"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">{{ $t("btn_cancel") }}</el-button>
          <el-button type="primary" @click="userUpdate('ruleForm')">{{
            $t("btn_confirm")
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="menuAddEdit">
import { createResources, updateResources } from "@/api/base.js";

import SelectModel from "../../../components/SelectModel/index";

const props = defineProps({
  tableRow:{
    type: Object,
    default: {}
  },
  visible:{
    type: Boolean,
    default: false
  },

});
const { proxy } = getCurrentInstance()
const state = reactive({
  dialogVisible: false,
  formData: {},
  rules: {
    resourceCode: [
      {
        required: true,
        message: proxy.$t("null_source_code"),
        trigger: "blur",
      },
    ],
    resourceDesc: [
      {
        required: true,
        message: proxy.$t("null_source_name"),
        trigger: "blur",
      },
    ],
    code: [
      {
        required: true,
        message: proxy.$t("null_operation_code"),
        trigger: "blur",
      },
    ],
    name: [
      {
        required: true,
        message: proxy.$t("null_operation_name"),
        trigger: "blur",
      },
    ],
  },
});

const emit = defineEmits()

const needPath = computed(() => {
  return state.formData.type !== "route";
});

watch(
  () => props.visible,
  (val) => {
    state.dialogVisible = val;
  },
  {
    immediate: true,
  }
);
watch(
  () => props.tableRow,
  (val) => {
    state.formData = val;
  },
  {
    immediate: true,
  }
);

function cancel () {
  state.dialogVisible = false;
  state.formData = {};
  emit("callback", false);
};
function userUpdate (formName) {
  //新增or编辑用户
  const api =
    state.formData.id !== undefined ? updateResources : createResources;
  proxy.$refs[formName].validate((valid) => {
    if (valid) {
      api(state.formData).then((resp) => {
        if (resp) {
          state.dialogVisible = false;
          emit("callback", state.formData.menuId);
        }
      });
    } else {
      return false;
    }
  });
};
</script>

<style scoped lang="scss">
// .checkBox {
//   position: relative;
//   width:  100%;
//   overflow: hidden;
//   margin-left: 20px;
//   background: #fff;
// }
:deep(.dialogBox .el-dialog__body) {
  margin: 0;
}
</style>
